<%@ page contentType="text/html; charset=UTF-8" language="java" %>
<%@ include file="include.jsp" %>
<%@ include file="menu.jsp" %>

<style type="text/css">

    .grid {
        width: 1200px;
        margin: 0 auto;

    }

    .time_line {
        width: 800px;
        height: 300px;
        border: 1px solid #aaa;
        margin: 0 auto;

    }

    .table_head {
        font-size: medium;
        text-align: center;
        font-weight: bold;
        background-color: #FFCC00;
    }

    .time_line_info {
        width: 400px;
        font-weight: bold;
    }

    .border {
        width: 200px;
        border: 1px solid black;
        height: 20px;
    }

    .progress {
        height: 20px;
        background-color: #99CCCC;
        text-align: center;
        font-weight: bold;
    }

     .my-event {
        font-size:x-small;
        z-index:10;
          margin-top:5px;
    }

    .info {
        color: #6699cc;
        font-weight: bold;
    }
</style>

<script type="text/javascript">
    Timeline_ajax_url = "js/timeline_ajax/simile-ajax-api.js";
    Timeline_urlPrefix = 'js/timeline_js/';
    Timeline_parameters = 'bundle=true';
</script>
<script src="js/timeline_js/timeline-api.js" type="text/javascript"></script>
<script type="text/javascript" src="js/timeline_js/timeline-bundle.js"></script>


<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">

    var tl;
    function onLoad(f1, div, value) {
        if (f1 == null) f1 = 6;
        var eventSource = new Timeline.DefaultEventSource();
        // original theme here - http://simile.mit.edu/timeline/api/scripts/themes.js
        var theme = Timeline.ClassicTheme.create(); // create the theme
        theme.event.bubble.width = 300;   // popup window width
        theme.event.bubble.height = 300;  // popup window height
        theme.event.track.height = 15;
        theme.event.tape.height = 18;  // line height

        var bandInfos = [
            Timeline.createBandInfo({
                eventSource:    eventSource,
                width:          "70%",
                intervalUnit:   f1,
                intervalPixels: 200,
                theme:          theme, // Apply the theme
                layout:         'original',
                zoomIndex:      10,
                zoomSteps:      new Array(
                {pixelsPerInterval: 280,  unit: Timeline.DateTime.HOUR},
                {pixelsPerInterval: 140,  unit: Timeline.DateTime.HOUR},
                {pixelsPerInterval:  70,  unit: Timeline.DateTime.HOUR},
                {pixelsPerInterval:  35,  unit: Timeline.DateTime.HOUR},
                {pixelsPerInterval: 400,  unit: Timeline.DateTime.DAY},
                {pixelsPerInterval: 200,  unit: Timeline.DateTime.DAY},
                {pixelsPerInterval: 100,  unit: Timeline.DateTime.DAY},
                {pixelsPerInterval:  50,  unit: Timeline.DateTime.DAY},
                {pixelsPerInterval: 400,  unit: Timeline.DateTime.MONTH},
                {pixelsPerInterval: 200,  unit: Timeline.DateTime.MONTH},
                {pixelsPerInterval: 100,  unit: Timeline.DateTime.MONTH},
                {pixelsPerInterval: 50,  unit: Timeline.DateTime.MONTH},
                {pixelsPerInterval: 400,  unit: Timeline.DateTime.YEAR},
                {pixelsPerInterval: 200,  unit: Timeline.DateTime.YEAR},
                {pixelsPerInterval: 100,  unit: Timeline.DateTime.YEAR},
                {pixelsPerInterval: 50,  unit: Timeline.DateTime.YEAR}
                        )// original, overview, detailed
            }),
            Timeline.createBandInfo({
                overview:       true,
                eventSource:    eventSource,
                width:          "30%",
                intervalUnit:   SimileAjax.DateTime.YEAR,
                intervalPixels: 300
            }),

        ];
        bandInfos[1].syncWith = 0;
        bandInfos[1].highlight = true;

        tl = Timeline.create(document.getElementById(div), bandInfos);
        var url = '.'; 

        eventSource.loadJSON(value, url); // The data was stored into the
        tl.layout(); // display the Timeline
        alert(t1.Timeline.timelineID);
    }

    var resizeTimerID = null;

    function onResize() {
        if (resizeTimerID == null) {
            resizeTimerID = window.setTimeout(function() {
                resizeTimerID = null;
                tl.layout();
            }, 500);
        }
    }


</script>

<body onresize="onResize();">
<!--onload="onLoad(6, 'testDiv');" onresize="onResize(); -->

<div class="grid">
    <table cellpadding="10">
        <tr class="table_head">
            <td class="time_line_info">Описание хоста</td>
            <td>Графическое представление</td>
        </tr>


        <tr style="margin-bottom:20px;">
            <td></td>
            <td>
                <div id="timeline" class="time_line">
                    <script type="text/javascript">
                        onLoad(6, 'timeline', ${json});
                    </script>
                </div>
            </td>
        </tr>

    </table>
</div>

</body>


